<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <div class="tips">
            <i class="el-icon-info" />
            <span>本月: 社保在缴 公积金在缴</span>
          </div>
        </template>
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="ExportExcel">excel导出</el-button>
          <el-button type="primary" size="small" @click="showAddDialog">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <el-table border :data="employeeList">
          
          <!-- prop指定一个字段名称，此时原样输出，后端返回什么就显示什么
          如果你想做定制化，拿到原数据利用作用域插槽，再做优化
           -->
          <!-- 差值表达式 内部支持三元运算，函数调用
           
           如果格式化的情况只有两种，用三元
           如果格式化的情况有很多，就用格式化函数
           方案:格式化函数 {{函数名(当前字段名)}，渲染的是函数的返回值
           思路：把拿到的源数据作为实参传入格式化函数，然后返回处理后的数据
            -->
          <el-table-column width="60" label="序号" type="index" :index="sortIndex" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template #default="{row }">
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
            
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template #default="{row }">
              {{ formatTime(row.timeOfEntry) }}
            </template>
            
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="getDetail(row.id)">查看</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 
          传给后端的size可以和分页组件要求的每页条数不一致吗？ 
            必须一致，否则后端的分页逻辑和前端的分页不一致
            如果后端一共20条数据，我们传给后端的size= 10，后端数据可以分两页出来
            如果前端的size=5，前端可以分4页，请问3页和4页哪里还有数据
        -->
        <el-pagination
          :total="total"
          :current-page="params.page"
          :page-size="params.size"
          layout="prev, pager, next"
          style="display:flex;justify-content:center;align-item:center;margin-top:20px;"
          @current-change="pageChange"
        />
      </el-card>
    </div>
    <!-- 新增员工的弹框 -->
    <addEmployee ref="addEmployee" :visible-dialog="dialogVisible" @close-dialog="closeDialog" @update-list="getList" />
    <!-- 分配角色弹框 -->
    <el-dialog class="assign-role" title="分配角色" :visible="showRoleDialog" @close="closeAssignRole" @open="openAssignRole">
      <!-- 这里准备复选框 -->
      <template #default>
        <!-- 视图影响数据：选中哪一个单项，这一项的label属性对应的值会被自动添加到v-model绑定数组中去 
            数据影响视图:如果想要默认选中一些选项，只需要在v-model绑定的数组中添加上label对应的值即可

            现在后端要的数据不是中文，而是id，但是前端展示的是中文
            解决办法：是以label绑定id,作为传给后端的数据，以插槽的写法，负责中文的显示
        -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </template>
      <template #footer>
        <el-button type="primary" size="small" @click="confirmAssignRole">确定</el-button>
        <el-button size="small">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {getExportData} from '@/utils/excel'
import {getEmployeeAPI, delEmployeeAPI, assignEmployeeRole, getEmployeeDetail} from '@/api/employee'
import {getRoleAPI} from '@/api/setting'
import dayjs from 'dayjs'
import addEmployee from '@/views/Employee/component/add-employee'
export default {
  name: 'EmployeeVue',
  components: {
    addEmployee
  },
  data(){
    return {
      // 员工列表
      employeeList: [],
      // 要发送给后端的数据
      params: {
        page: 1,
        size: 10
      },
      // 总条数
      total: 0,
      // 弹框
      dialogVisible: false,
      // 员工id
      employeeId: null,
      // 分配角色弹框
      showRoleDialog: false,
      // 放被选中的角色id数组
      checkList: [],
      // 角色列表
      roleList: []
    }
  },
  mounted(){
    this.getList()
  },
  methods: {
    // 表格的序号依次递增
    sortIndex(index){
      return index+1+(this.params.page-1)*this.params.size
    },
    // 格式化聘用形式
    //  聘用形式的格式化
    // 把value按照格式需求格式化
    // 1--》正式，2--》非正式，4--》其他，利用前端枚举优化
    // 前端枚举：先把所有的对应关系通过对象定义出来 + 对象的取值(策略模式，目的:优化多分支语句)
    formatEmployment(value){
      const map = {
        1: '正式',
        2: '非正式',
        4: '其他'
      }
      return map[value]
    },
    // 格式化入职时间
    formatTime(t){
      return  dayjs(t).format('YYYY-MM-DD')
    },
    // 获取员工列表
    async getList(){
      const res =  await getEmployeeAPI(this.params)
      this.employeeList = res.rows
      this.total = res.total
    },
    // 分页
    pageChange(page){
      // 将拿到的页码作为要提交给服务端的参数，然后重新调用获取员工的列表
      this.params.page = page
      this.getList()
    },
    // 删除员工
    delEmployee(id){
      this.$confirm('确定删除员工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发送删除员工请求
        await delEmployeeAPI(id)
        // 提示用户删除成功
        this.$message.success('删除员工成功！')
        // 重新渲染员工列表
        this.getList()
      }).catch(() => {
                 
      });
    },
    // 通过父传子打开弹框
    showAddDialog(){
      this.dialogVisible = true
      // 点击新增弹框，通过ref属性调用子组件的方法，获取部门数据
    
    },
    // 通过子传父关闭弹框
    closeDialog(){
      this.dialogVisible = false
    },
    // 导出excel
    ExportExcel(){
      // 动态导入，只要用到它的时候才会动态加载，进行打包的时候就不会出现在包里，不会占用体积
      import('@/vendor/Export2Excel').then(async excel => {
      //  一个表格最重要的两部分：1、表头theader,2、表体：tbody
        // (1)请求当前页的最新数据
        // 获取到当前页最新的数据
        const res = await getEmployeeAPI(this.params) //对象数组
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        // （2）将后端返回的数据格式化成插件需要的格式
        const {data} = getExportData(res.rows, headerRelation)
        
        // （3）配置到对应的位置

        excel.export_json_to_excel({
          // 配置表头，数组格式
          header: Object.keys(headerRelation),
          // 配置表体，二维数组
          data: data,
          // 文件名称
          filename: 'excel_list',
          // 单元格宽度是否为自动撑开
          autoWidth: true,
          // excel的文件类型
          bookType: 'xlsx'
          
        })
      })
    },
    // 查看员工详情
    getDetail(id){
      // query+path
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    },
    assignRole(id){
      this.employeeId = id
      this.showRoleDialog = true
    },
    closeAssignRole(){
      this.showRoleDialog = false
    },
    async  openAssignRole(){
      // 获取角色列表，当我们数据足够大的时候，会获取到所有的角色
      const res =  await getRoleAPI({page: 1, pagesize: 100})
      this.roleList = res.rows
      // 获取员工详情
      const res_detail =   await getEmployeeDetail(this.employeeId)
      // 将之前分配的角色回显在复选框上
      this.checkList = res_detail.roleIds

    },
    // 分配角色
    async  confirmAssignRole(){
      await assignEmployeeRole({id: this.employeeId, roleIds: this.checkList})
      this.$message.success('分配角色成功')
      this.checkList = []
      this.showRoleDialog = false
    }
    
    
  }}
  

</script>

<style>
</style>
